<template>
	<view style="display: flex;align-items: center;">
		<view class="" style="cursor: pointer;" :style="(checked?'':'color: #007aff;')" v-if="inactiveText" @click="$emit('mchange', false)">
			{{inactiveText}}
		</view>
		<switch  style="transform:scale(0.7);margin: 0 10px;" :checked="checked" :disabled="disabled" @change="controlDst"></switch>
		
		<view class="" style="cursor: pointer;" :style="(checked?'color: #007aff;':'')" v-if="activeText" @click="$emit('mchange', true)">
			{{activeText}}
		</view>
	</view>
</template>

<script>
	export default {
		name:"ymx-switch",
		model: {
		    prop: 'checked',
		    event: 'change'
		  },
		props:['disabled','checked','active-text','inactive-text'],
		data() {
			return {
				type:false,
			};
		},
		methods:{
			controlDst(e){
				console.log(e);
				this.$emit('change', e.detail.value)
				this.$emit('mchange')
			},
		}
	}
</script>

<style>

</style>